<template>
  <div class="admin-roles">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input v-model="searchQuery" placeholder="请输入用户名或角色进行搜索"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button type="primary" @click="addUser">新增用户</el-button>
        <el-button type="success" @click="enableUsers">启用</el-button>
        <el-button type="warning" @click="disableUsers">禁用</el-button>
      </el-col>
    </el-row>

    <el-table :data="roleList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
      <el-table-column prop="username" label="用户名" width="180"></el-table-column>
      <el-table-column prop="role" label="角色" width="180"></el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="editRole(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="viewDetails(scope.row)" type="info" size="small">详情</el-button>
          <el-button @click="sendMessage(scope.row)" type="success" size="small">发消息</el-button>
          <el-button @click="deleteRole(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalItems"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "ArticleList",
  data() {
    return {
      searchQuery: "",
      roleList: [
        { username: "admin11", role: "USER", status: "启用" },
        { username: "admin1", role: "USER", status: "禁用" }
      ],
      currentPage: 1,
      pageSize: 10,
      totalItems: 400,
      dialogVisible: false,
      roleForm: {
        id: "",
        name: "",
        description: ""
      }
    };
  },
  methods: {
    handleSearch() {
      // TODO: 实现搜索逻辑
    },
    addUser() {
      // TODO: 实现新增用户逻辑
    },
    enableUsers() {
      // TODO: 实现启用用户逻辑
    },
    disableUsers() {
      // TODO: 实现禁用用户逻辑
    },
    editRole(row) {
      this.roleForm = { ...row };
      this.dialogVisible = true;
    },
    viewDetails(row) {
      // TODO: 实现查看详情逻辑
    },
    sendMessage(row) {
      // TODO: 实现发送消息逻辑
    },
    deleteRole(row) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // TODO: 发送删除请求
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    saveRole() {
      // TODO: 发送保存请求
      this.dialogVisible = false;
      this.$message({
        type: "success",
        message: "保存成功!"
      });
    }
  }
};
</script>

<style scoped>
.admin-roles {
  padding: 20px;
  background-color: #f5f5f5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
  margin: 20px; /* 增加整体容器的边距 */
}

.el-table {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-radius: 20px;
  animation: bounceIn 0.5s;
  margin-top: 20px; /* 在表格上方增加边距 */
}

.el-button {
  font-weight: bold;
  border-radius: 5px;
  transition: all 0.3s ease;
  animation: pulse 1s infinite;
}

.el-button:hover {
  transform: scale(1.05);
}

.el-dialog {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  animation: fadeInUp 0.5s;
}

.el-pagination {
  margin-top: 20px;
}
</style>